<template>
  <div class="h-full w-full" style="height:100%;overflow: auto;">
    <SplitPanel :style="{ 'flex-direction': 'row !important' }" class="user-page-box">
      <template #left-content>
        <div class="flex justify-between flex-col h-full">
          <div></div>
          <a-button v-for="btn in itemData" :key="btn.NO" style="text-align: left;" :icon="h(UserOutlined)" @click="handlerChange(btn)">{{ btn.NAME }}</a-button>
        </div>
      </template>
      <template #right-content>
        <template v-if="expItems.NO==='byUsers'" >
          <byUsers :defaultData="expItems" @updateValue="handleSubmit"></byUsers>
        </template>
        <template v-if="expItems.NO==='byStations'" >
          <byStation :defaultData="expItems" @updateValue="handleSubmit"></byStation>
        </template>
        <template v-if="expItems.NO==='byLeader'" >
          <byLeader :defaultData="expItems" @updateValue="handleSubmit"></byLeader>
        </template>
        <template v-if="expItems.NO==='byParentLeader'" >
          <byParentLeader :defaultData="expItems" @updateValue="handleSubmit"></byParentLeader>
        </template>
        <template v-if="expItems.NO==='byDeptLeader'" >
          <byDeptLeader :defaultData="expItems" @updateValue="handleSubmit"></byDeptLeader>
        </template>
        <template v-if="expItems.NO==='byParentDeptLeader'" >
          <byParentDeptLeader :defaultData="expItems" @updateValue="handleSubmit"></byParentDeptLeader>
        </template>
        <template v-if="expItems.NO==='byGroups'" >
          <byGroups :defaultData="expItems" @updateValue="handleSubmit"></byGroups>
        </template>
        <template v-if="expItems.NO==='byNode'" >
          <byNode :defaultData="expItems" @updateValue="handleSubmit"></byNode>
        </template>
        <template v-if="expItems.NO==='byMultiLevelLeader'" >
          <byMultilevelLeader :defaultData="expItems" @updateValue="handleSubmit"></byMultilevelLeader>
        </template>
        <template v-if="expItems.NO==='bySql'" >
          <bySQL :defaultData="expItems" @updateValue="handleSubmit"></bySQL>
        </template>
        <template v-if="expItems.NO==='byWebApi'" >
          <byWebApi :defaultData="expItems" @updateValue="handleSubmit"></byWebApi>
        </template>
        <template v-else></template>
      </template>
    </SplitPanel>
  </div>
</template>

<script setup lang="tsx">
  import { ref, h,onMounted} from 'vue';
  import { UserOutlined } from '@ant-design/icons-vue';
  import { SplitPanel } from '@/components/basic/split-panel';
  import {createItemData} from '@/components/setting/subComponents/expItems';
  import byUsers from '@/components/setting/subComponents/byUsers.vue';
  import byStation from '@/components/setting/subComponents/byStation.vue';
  import byLeader from '@/components/setting/subComponents/byLeader.vue';
  import byParentLeader from '@/components/setting/subComponents/byParentLeader.vue';
  import byDeptLeader from '@/components/setting/subComponents/byDeptLeader.vue';
  import byParentDeptLeader from '@/components/setting/subComponents/byParentDeptLeader.vue';
  import byGroups from '@/components/setting/subComponents/byGroups.vue';
  import byNode from '@/components/setting/subComponents/byNode.vue';
  import byMultilevelLeader from '@/components/setting/subComponents/byMultilevelLeader.vue';
  import bySQL from '@/components/setting/subComponents/bySQL.vue';
  import byWebApi from '@/components/setting/subComponents/byWebApi.vue';

  interface Props {
    defaultData?: any;
  }
  const props = withDefaults(defineProps<Props>(), {
    defaultData: [{}]
  });
  defineOptions({
    name: 'expression',
  });
  const expItems = ref({
    NO: '',
    NAME: '',
    ORG_TYPE: '',
    nodeData:'',
    orgData:[],
    userSubDataType:'',
    userFormKey:'',
  });

  //规则列表/选择项
  const itemData=createItemData();
  onMounted(()=>loadInfo());
  const loadInfo=()=>{
    console.log(props.defaultData,'props.defaultData111')
        expItems.value=props.defaultData;
    }
  const handlerChange=(record)=>{
    expItems.value.NO=record.NO;
    expItems.value.NAME=record.NAME;
    expItems.value.ORG_TYPE=record.NO;
  }
  //点击确认
  const handleSubmit=(record)=>{
    console.log(record,"record4444")
    emit('updateValue', record);
  }

  const emit = defineEmits(['updateValue']);  
</script>

<style lang="less" scoped>
@import '@/styles/navTheme.less';
@classBacks: user-page-box;
.customSetStyle(@classBacks, background-color, 'content-back-user');

:deep(.ant-tree) {
  flex: 1;
}

.testtitle {
  width: 100%;
  overflow: hidden;
  line-height: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.testitem {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 350px;
  align-items: center;
}
.scalable {
    position: relative;
    width: 240px;
    min-width: 350px !important;
    max-width: 50vw;
    overflow: auto;
  }
  .tagboxs{
height: 28px;
}
</style>
